<template>
  <div class="undetermined-container">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>人员信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>职员工资管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <br>
    <el-row>
      <el-form label-width="70px">
        <el-row>
          <el-col :span="8" >
            <el-form-item label="姓名" label-width="80px">
              <el-select class="input" v-model="input" filterable placeholder="请选择用户名">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value1">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="工资属性" label-width="80px">
              <el-select class="input" v-model="input" filterable placeholder="请选择工资属性">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button class="button_check" icon="el-icon-search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
        <el-button-group style="margin-left: 20px">
          <!--        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->
          <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
          <el-button type="primary" icon="el-icon-share">修改</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
        </el-button-group>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="username"
          label="用户名"
          width="180">
          <template slot="header">
            <span><i class="el-icon-user"></i></span>
            <!--<el-tooltip placement="top" popper-class="toolTipClass">-->
            <span class="explain">用户名</span>
            <!-- </el-tooltip>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="bp"
          label="基本工资"
          sortable>
        </el-table-column>
        <el-table-column
          prop="op"
          label="加班工资">
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev,pager,next"
        :total="5">
      </el-pagination>
    </el-row>
    <el-dialog
      title="员工添加"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-group>
          <el-form-item label-width="80px" label="员工姓名">
            <el-input v-model="username"/>
          </el-form-item>
          <el-form-item label-width="80px" label="性别">
            <el-input v-model="sex"/>
          </el-form-item>
          <el-form-item label-width="80px" label="基本工资">
            <el-input v-model="bp"/>
          </el-form-item>
          <el-form-item label-width="80px" label="加班工资">
            <el-input v-model="op"/>
          </el-form-item>
        </el-form-group>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="sumbmitHandle">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "undetermined",
    data(){
      return{
        input:'',
        tableData:[],
        dialogVisible:false,
        options: [{
          value: '选项1',
          label: '基本工资'
        },{
          value: '选项2',
          label: '加班工资'
        }],
        options1: [{
          value1: '选项1',
          label: 'admin1'
        },{
          value1: '选项2',
          label: 'admin2'
        }],
        value1:'',
        value: '',
        username:'',
        sex:'male',
        bp:'',
        op:''


      }
    },mounted(){
      var _this=this;
      this.axios(
        {
          url:'http://localhost:3000/income/und',
          method:'get'
        }
      ).then(function (res) {
        _this.tableData=res.data;
      })
    },methods:{
      btnAddClick(){
        this.dialogVisible=true;
      },
      handleClose(){
        this.dialogVisible=false;
      },
      sumbmitHandle(){
        var _this=this;
        this.axios({
          url:'http://127.0.0.1:3000/income/und_add',
          method:'get',
          params:{
            username:this.username,
            sex:this.sex,
            bp:this.bp,
            op:this.op,
          }
        }).then(function (res) {
          if(res.data.flag){
            _this.tableData=res.data.und;
            _this.$message('添加成功')
            _this.dialogVisible=false;
          }else{
            alert('添加失败');
          }

        })
      }
    }
  }
</script>

<style scoped>
  .button_check{
    background-color: pink;
    margin-left: 25px;
  }
  .input{
    width: 200px
  }
  .button_{
    background-color: rgb(255,255,255);
  }
</style>
